<template>
  <div class="login-tools display-flex flex-align">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <language-switcher></language-switcher>
    <theme-switcher></theme-switcher>
  </div>
</template>

<script setup lang="ts">
import LanguageSwitcher from '@/views/preferences-set/components/general/components/language-switcher/index.vue'
import ThemeSwitcher from '@/views/preferences-set/components/appearance/components/theme-switcher/index.vue'

defineOptions({
  name: 'CoreLoginTools'
})
</script>

<style scoped lang="scss">
.login-tools {
  position: absolute;
  top: 12px;
  right: 8px;
  padding: 4px 12px;
  background-color: var(--core-bg-color-04);
  border-radius: 24px;

  .item {
    width: 32px;
    height: 32px;
  }
}
</style>
